import * as React from 'react'
import './index.less'
// const logo = require('../../../../image/WX20190409-124156@2x.png')
// react 动画库

import {CSSTransition,TransitionGroup} from 'react-transition-group'
interface Props{
  category:string,
  setCategory: any,
  refreshLessons:any
}
interface State{
  showList:boolean
}
export default class HomeHeader extends React.Component<Props,State> {
  state = {
    showList: false
  }

  changCategory = (event) => {
    // console.log(event.target.dataset.category)
    let category = event.target.dataset.category
    this.setState({showList:false},()=>{
      this.props.setCategory(category) // 改变仓库分类
      this.props.refreshLessons()
    })
    
  }

  render() { 
    let {showList} = this.state
    let {category} = this.props
    console.log(category)
    return ( 
      <div className="home-header">
        <div className="home-menu">
          <div className='logo'> logo</div>
          {/* <img src={logo} alt=""/> */}
          <div onClick={()=>this.setState({showList:!this.state.showList})}>
            {
              !showList? <i className="iconfont icon-uilist"></i>: <i className="iconfont icon-guanbi"></i>
            }
          </div>
        </div>
        <TransitionGroup>
          {showList&&(
          <CSSTransition 
            classNames="fade"
            timeout={5000}
           >
              <ul className="menu-list" onClick={this.changCategory}>
                <li className={category === 'react'?'active':''} data-category="react" >react</li>
                <li className={category === 'vue'?'active':''} data-category="vue">vue</li>
              </ul>
           </CSSTransition>
            )
          }
        </TransitionGroup>
        
       
      </div>
    );
  }
}
 
